<template>
    <div class="container">
        <el-card shadow="never">
            <div class="head flex flex-ai-c">
                <div class="fs-16 bold">{{ setDefault(detail.serveCompanyName) }}</div>
                <div class="fs-12 fc-lightgray mg-l-16">实发金额：</div>
                <div class="fs-16 bold fc-orange"><span
                        v-if="detail.payRealHairTotalMoney || detail.payRealHairTotalMoney === 0">¥</span>{{
                            setDefault(detail.payRealHairTotalMoney) }}</div>
            </div>
            <div class="body mg-t-20">
                <div class="flex mg-b-12">
                    <div class="w-200">
                        <span class="fc-lightgray">待领金额：</span>
                        <span class="bold"><span v-if="detail.totalWaitPay || detail.totalWaitPay === 0">¥</span>{{
                            setDefault(detail.totalWaitPay) }}</span>
                    </div>
                    <div class="w-300">
                        <span class="fc-lightgray">申请时间：</span>
                        <span class="bold">{{ setDefault(detail.createTime) }}</span>
                    </div>
                    <div class="flex-1">
                        <span class="fc-lightgray">所属企业：</span>
                        <span class="bold">{{ setDefault(detail.serveCompanyName) }}</span>
                    </div>
                </div>
                <div class="flex mg-b-12">
                    <div class="w-200">
                        <span class="fc-lightgray">停发金额：</span>
                        <span class="bold"><span
                                v-if="detail.payStopTotalMoney || detail.payStopTotalMoney === 0">¥</span>{{
                                    setDefault(detail.payStopTotalMoney) }}</span>
                    </div>
                    <div class="w-300">
                        <span class="fc-lightgray">发薪时间：</span>
                        <span class="bold">{{ setDefault(detail.approvalTime) }}</span>
                    </div>
                    <div class="flex-1">
                        <span class="fc-lightgray">申请人：</span>
                        <span class="bold">{{ setDefault(detail.createUserName) }}</span>
                    </div>
                </div>
                <div class="flex">
                    <div class="w-200">
                        <span class="fc-lightgray">发薪人数：</span>
                        <span class="bold">{{ setDefault(detail.peopleNum) }}</span>
                    </div>
                    <div class="w-300">
                        <span class="fc-lightgray">支付方式：</span>
                        <span class="bold" v-if="setDefault(detail.payAccountFlag) === 10001">微信支付</span>
                        <span class="bold" v-if="setDefault(detail.payAccountFlag) === 20001">支付宝支付</span>
                    </div>
                    <div class="flex-1">
                        <span class="fc-lightgray">发薪备注：</span>
                        <span class="bold">{{ setDefault(detail.remarks) }}</span>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {
    getProcessDetail,
    ProcessDetailDto,
    getProcessWorkers,
    ProcessWorkersDto,
    payScreenType
} from '@/api/pay'

export default defineComponent({
    components: {},
    props: {
        id: {
            type: [String, Number],
            default: ''
        }
    },
    data() {
        return {
            detail: {}
        }
    },
    watch: {
        id: {
            handler(newval) {
                if (newval) {
                    this.getData()
                }
            },
            immediate: true
        }
    },
    computed: {
        setDefault() {
            return (value: string) => {
                return value ?? '--'
            }
        }
    },
    methods: {
        getData() {
            getProcessDetail({
                id: this.id as any
            }).then((res: any) => {
                this.detail = res || {}
                this.$emit('basicInfo', this.detail)
            })
        }
    }
})
</script>

<style scoped lang="stylus">
.body
  background #F7FBFE
  border-radius 6px
  padding 18px 16px
.w-200
  width 200px
.w-300
  width 300px
.fc-lightgray
  color #5E617D
</style>
